<script setup>
import { ref, computed } from 'vue';
import UnitSelector from './UnitSelector.vue';

const props = defineProps({
  category: Object
});

const inputValue = ref(1);
const fromUnit = ref(props.category.units[0].name);
const toUnit = ref(props.category.units[1].name);

const result = computed(() => {
  if (fromUnit.value === toUnit.value) return inputValue.value;

  const convertedValue = convert(
      inputValue.value,
      fromUnit.value,
      toUnit.value,
      props.category.name
  );

  return simplifyNumber(convertedValue);
});

function convert(value, fromUnit, toUnit, category) {
  // 温度转换
  if (category === 'temperature') {
    let celsius;
    switch (fromUnit) {
      case 'celsius': celsius = value; break;
      case 'fahrenheit': celsius = (value - 32) * 5 / 9; break;
      case 'kelvin': celsius = value - 273.15; break;
      default: return value;
    }
    switch (toUnit) {
      case 'celsius': return celsius;
      case 'fahrenheit': return celsius * 9 / 5 + 32;
      case 'kelvin': return celsius + 273.15;
      default: return value;
    }
  }

  // 长度转换
  if (category === 'length') {
    const toMeter = {
      meter: 1, kilometer: 1000, centimeter: 0.01, millimeter: 0.001,
      mile: 1609.344, yard: 0.9144, foot: 0.3048, inch: 0.0254
    };
    const meters = value * toMeter[fromUnit];
    const fromMeter = {
      meter: 1, kilometer: 1 / 1000, centimeter: 100, millimeter: 1000,
      mile: 1 / 1609.344, yard: 1 / 0.9144, foot: 1 / 0.3048, inch: 1 / 0.0254
    };
    return meters * fromMeter[toUnit];
  }

  // 时间转换
  if (category === 'time') {
    const toSecond = {
      second: 1, millisecond: 0.001, minute: 60, hour: 3600,
      day: 86400, week: 604800, month: 2629800, year: 31557600
    };
    const seconds = value * toSecond[fromUnit];
    const fromSecond = {
      second: 1, millisecond: 1000, minute: 1 / 60, hour: 1 / 3600,
      day: 1 / 86400, week: 1 / 604800, month: 1 / 2629800, year: 1 / 31557600
    };
    return seconds * fromSecond[toUnit];
  }

  // 重量转换
  if (category === 'weight') {
    const toGram = {
      gram: 1, kilogram: 1000, milligram: 0.001, ton: 1000000,
      pound: 453.59237, ounce: 28.349523125
    };
    const grams = value * toGram[fromUnit];
    const fromGram = {
      gram: 1, kilogram: 0.001, milligram: 1000, ton: 0.000001,
      pound: 1 / 453.59237, ounce: 1 / 28.349523125
    };
    return grams * fromGram[toUnit];
  }

  return value;
}

function simplifyNumber(num) {
  if (Number.isInteger(num)) return num;
  let str = num.toString();
  if (str.includes('e')) str = num.toFixed(20).replace(/0+$/, '');
  if (str.includes('.')) {
    str = str.replace(/0+$/, '');
    if (str.endsWith('.')) str = str.slice(0, -1);
  }
  return parseFloat(str);
}

function swapUnits() {
  [fromUnit.value, toUnit.value] = [toUnit.value, fromUnit.value];
}
</script>

<template>
  <div class="converter-card">
    <h3>{{ category.label }}</h3>

    <div class="input-group">
      <input
          type="number"
          v-model.number="inputValue"
          class="input"
      />
      <UnitSelector
          v-model="fromUnit"
          :units="category.units"
      />
    </div>

    <button @click="swapUnits" class="swap-button">⇅ 交换单位</button>

    <div class="result-group">
      <div class="result">{{ result }}</div>
      <UnitSelector
          v-model="toUnit"
          :units="category.units"
      />
    </div>
  </div>
</template>

<style scoped>
.converter-card h3{
  color: #c2ffc7;
  font-size: 1.5rem; /* 默认通常是1.17em，这里放大 */
  margin: 0;  /* 同时调整上下边距保持美观 */
}
.converter-card {
  display: flex;
  flex-direction: column;
  height: 100%; /* 填满网格单元格 */
  min-height: 200px; /* 设置最小高度 */
}

.input-group, .result-group {
  display: grid;
  grid-template-columns: 1fr 2fr; /* 输入框占1份，选择器占2份 */
  /* gap: 15rem; */
  align-items: center;
}

.input, .result {
  color: #c2ffc7;
  font-size: 1.5rem;
  background: #ffbece;
  border-radius: 8px;
  border: 3px solid #c2ffc7;
  width: 100%;
  box-sizing: border-box;
  padding: 0.5rem;
}

.swap-button {
  color: #ffbece;
  background: #c2ffc7;
  border-radius: 8px;
  border: 3px solid #c2ffc7;
  margin: 0.5rem auto; /* 居中按钮 */
  width: 80%;
  transition: all 0.2s ease;
}
.swap-button:hover {
  color: #c2ffc7;
  background: #ffbece;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
</style>